<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div class="nav">
            首页 / 聚园荟
          </div>
          <div class="text-center mb-3" style="font-size: 36px;font-weight: 500;color: #000000;line-height: 50px;letter-spacing: 2px;">聚园荟</div>
          <div class="text-center" style="height: 28px;font-size: 20px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #B7BAC0;line-height: 28px;">荟聚全国精英园区</div>
          <div v-html="content09" style="margin-top:78px;margin-bottom:54px;font-size: 18px;font-family: PingFangHK-Light, PingFangHK;font-weight: 300;color: #000000;line-height: 30px;letter-spacing: 1px;">
          </div>
          <div style="margin-bottom:57px;height: 33px;font-size: 24px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #000000;line-height: 33px;">具体服务项目</div>
          <div style="display:flex;justify-content: center;align-items: center;">
            <div style="margin-right:64px;display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_21.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">免费发布</div>
            </div>
            <div style="margin-right:64px;display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_22.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">优惠服务</div>
            </div>
            <div style="margin-right:64px;display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_23.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">园区交流</div>
            </div>
            <div style="display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_24.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">园区学习</div>
            </div>
          </div>
          <div style="margin-top:33px;display:flex;justify-content: center;align-items: center;">
            <div style="margin-right:64px;display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_25.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">园区联合</div>
            </div>
            <div style="margin-right:64px;display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_26.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">园区托管</div>
            </div>
            <div style="margin-right:64px;display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_27.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">园区兼并</div>
            </div>
            <div style="display:flex;align-items:center;">
              <div style="margin-right:17px;width:45px;height:45px;"><img src="../assets/product_28.png" /></div>
              <div style="height: 38px;font-size: 28px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #212A41;line-height: 38px;">园区投资</div>
            </div>
          </div>

          <div class="flex" style="margin-top:63px;">
            <div class="flex-1" style="text-align:left;font-size: 24px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #000000;line-height: 33px;">活动报道</div>
            <div class="flex-1" style="text-align:right;font-size: 18px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #A5ABB6;line-height: 25px;letter-spacing: 1px;">更多</div>
          </div>

          <div class="flex flex-col" style="margin-top:39px;">
            <div v-for="(item, index) in newsList" :key="index" @click="goToNewDetailView(item)" class="flex " style="margin-bottom:9px;font-size: 18px;font-family: PingFangHK-Medium, PingFangHK;font-weight: 500;color: #FE7743;line-height: 25px;letter-spacing: 1px;">
              <div class="flex-1">{{ item.newsname }}</div>
              <div class="" style="width:210px;text-align:right;">{{ item.createTime }}</div>
            </div>
          </div>

          <div style="text-align:center;margin-top:126px;height: 50px;font-size: 36px;font-family: PingFangHK-Semibold, PingFangHK;font-weight: 600;color: #31394F;line-height: 50px;letter-spacing: 2px;">获取详细方案</div>

          <div style="margin-top:37px;display:flex;justify-content:center;">
            <div style="width:600px;">
              <el-input
                placeholder="请输入姓名"
                prefix-icon="el-icon-user-solid"
                style="margin-bottom:23px;"
                v-model="form.name">
              </el-input>
              <el-input
                placeholder="请输入公司名"
                prefix-icon="el-icon-office-building"
                style="margin-bottom:23px;"
                v-model="form.company">
              </el-input>
              <el-input
                placeholder="请输入手机号"
                prefix-icon="el-icon-mobile"
                style="margin-bottom:23px;"
                v-model="form.mobile">
              </el-input>
              <el-input
                placeholder="请输入验证码"
                prefix-icon="el-icon-lock"
                style="margin-bottom:23px;"
                v-model="form.vcode">
                <template slot="append">获取验证码</template>
              </el-input>
              <el-button @click="addContact" style="background-color:#FE7743;color:#FFFFFF;border-color:#FE7743;width:100%;">发送</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { getFuWenBen } from "@/api/common"
  import { fetchNewsList } from '@/api/news'
  import { createContact } from '@/api/contact'
  import NavBar from "@/components/NavBar.vue"
  
  export default {
    name: 'CollectView',
    components: {
      NavBar
    },
    data() {
      return {
        content09: '',
        form: {
          name: '',
          mobile: '',
          company: '',
          vcode: '',
          type: 2,
        },
        newsList: [],
        newsListQuery: {
          pageNum: 1,
          pageSize: 10,
          zixunleixing: 8
        }
      }
    },
    created() {
      getFuWenBen(9).then(response => {
        this.content09 = response.data
      })
      fetchNewsList(this.newsListQuery).then(response => {
        this.newsList = response.data
      })
    },
    methods: {
      goToNewDetailView(item){
        this.$router.push({ name: 'news-detail', params: { id: item.id }})
      },
      addContact() {
        createContact(this.form).then(response => {
          // console.info(response.data)
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
    .main .nav {
      font-size: 0.625rem;
      font-family: PingFangHK-Regular, PingFangHK;
      font-weight: 400;
      color: #A4A8AF;
      margin-top: 0.8125rem;
    }
  </style>
        